import React,{useEffect}from 'react';
import {  Modal, Form, Input, Radio,DatePicker } from 'antd';
import moment from 'moment'
 const CustomModel = ({ visible, onCreate, onCancel,editType,editMessage }) => {
   console.log('修改数据：',editMessage)
  const [form] = Form.useForm()
  //执行副作用
  useEffect(() => {
    const initVal ={
      ...editMessage,
      createAt:moment(editMessage.createAt)
    }
    form.setFieldsValue(initVal)
  }, [editMessage])
  return (
    <Modal
       forceRender
      visible={visible}
      title={editType==='create'?'创建登记信息':'修改登记信息'}
      okText="保存"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            console.log('表单数据：', values, +values.createAt)
            values={...values, createAt:+values.createAt}
            form.resetFields()
            onCreate(values)
          })
          .catch((info) => {
            console.log('Validate Failed:', info)
          })
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="name"
          label="姓名"
          rules={[
            {
              required: true,
              message: '请输入姓名',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="sex"
          label="性别"
        >
          <Radio.Group>
            <Radio value="male">男</Radio>
            <Radio value="female">女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="cid"
          label="身份证号"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="phone"
          label="电话"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="address"
          label="住址"
          rules={[
            {
              required: true,
              message: '请填写地址',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="createAt"
          label="到访时间"
        >
          <DatePicker showTime />
        </Form.Item>
        <Form.Item
          name="_id"
          label="主键"
          hidden
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  )
}
export default CustomModel